<template>
  <div class="only-vip">
    <el-row :gutter="20" class="p-20">
      <el-col :span="7">
        <div class="bg-purple bc-w-r">
          <div class="p-12">
            <el-button type="primary" class="ov-float-right bt-select" @click="drawer = true">
              <i class="el-icon-search" />
              Find</el-button>
            <el-button type="primary" class="ov-float-right bt-select" @click="exportExcel('vip')">
              <i class="el-icon-tickets" />
              Export</el-button>
            <!--          抽屉-->
            <el-drawer
              :visible.sync="drawer"
              direction="rtl"
            >
              <ul class="nav-ul">
                <li>
                  <h5 class="tc-menu-title mt-0 mb-24">指定店铺数据分析</h5>
                  <el-select
                    v-model="shopname"
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in shopName"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></li>
                <li>
                  <h5 class="tc-menu-title mt-0 mb-24">指定时间段内销售额趋势</h5>
                  <el-date-picker
                    v-model="timeBefore"
                    type="datetime"
                    placeholder="开始时间"
                  />
                  <hr>
                  <el-date-picker
                    v-model="timeAfter"
                    type="datetime"
                    placeholder="结束时间"
                  />
                </li>
                <li>
                  <el-button type="primary" @click="select" style="width: 200px">
                    查询</el-button>
                </li>
              </ul>
            </el-drawer>
            <h5 class="mb-0 h5-s-1 pl-12">会员列表</h5>
            <div class="p-20">
              <el-table
                :data="vipList"
                height="355"
                style="width: 100%"
                @current-change="handleCurrentChange"
              >
                <el-table-column
                  prop="nameShop"
                  label="名称"
                />
                <el-table-column
                  prop="numberShop"
                  label="数量"
                />
                <el-table-column
                  prop="phone"
                  label="电话"
                />
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="17">
        <div class="bg-purple bc-w-r p-12">
          <ul class="tc-menu-title ov-float-right nav-ul pr-3">
            <li @click="select_shop_time(1)">Y</li>
            <li @click="select_shop_time(2)">M</li>
            <li @click="select_shop_time(3)">D</li>
            <li @click="select_shop_time(4)">H</li>
            <li @click="select_shop_time(5)">M</li>
            <li @click="select_shop_time(6)">S</li>
          </ul>
          <h5 class="h5-s-1 mt-0 p-3">时间</h5>
          <div class="card-body">
            <ve-Line :data="timeLine" :extend="lineExtend" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="p-20">
      <el-col :span="6">
        <div class="bg-purple bc-w-r">
          <div class="">
            <ul>
              <li class="p-20 borderb-1">
                <div class="ov-title-flex">
                  <div>
                    <h5 class="h5-fs-c-1">最大值与总计之比</h5>
                    <h5 class="ov-title-flex-font-s mt-13">{{ fristAllPro }}%</h5>
                  </div>
                  <div>
                    <svg t="1606719460676" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2865" width="70" height="70"><path d="M512 928a416 416 0 1 1 416-416 416 416 0 0 1-416 416z m0-768a352 352 0 1 0 352 352A352 352 0 0 0 512 160z" fill="#1296db" p-id="2866" /><path d="M512 928a412.48 412.48 0 0 1-294.08-121.92 32 32 0 1 1 45.12-45.12A352 352 0 1 0 512 160a32 32 0 0 1 0-64 416 416 0 0 1 0 832z" fill="#1296db" p-id="2867" /><path d="M384 480a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32zM640 736a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32zM336 720a32 32 0 0 1-22.72-9.28 32 32 0 0 1 0-45.44l352-352a32 32 0 0 1 45.44 45.44l-352 352a32 32 0 0 1-22.72 9.28z" fill="#1296db" p-id="2868" /></svg>
                  </div>
                </div>
              </li>
              <li class="p-20 borderb-1">
                <div class="ov-title-flex">
                  <div>
                    <h5 class="h5-fs-c-1">平均值</h5>
                    <h5 class="ov-title-flex-font-s mt-13">{{ averageTitle }}</h5>
                  </div>
                  <div>
                    <svg t="1606719552609" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3534" width="70" height="70"><path d="M690.71 388.77c-51.956 73.454-105.703 161.838-161.242 265.152 14.333 53.15 32.547 96.447 54.643 129.89 22.096 33.442 42.4 50.164 60.913 50.164 4.18 0 8.361-0.747 12.541-2.24 4.18-1.493 8.51-4.479 12.99-8.958 4.478-4.479 9.405-10.898 14.78-19.26 5.375-8.36 11.645-19.11 18.811-32.247l9.854 8.957c-10.152 41.207-20.603 70.618-31.353 88.235-10.749 17.618-25.977 26.426-45.685 26.426-26.873 0-50.462-19.707-70.767-59.122-9.555-19.11-19.11-40.46-28.665-64.049-9.555-23.589-19.409-50.313-29.561-80.173a3664.756 3664.756 0 0 1-36.727 66.289 8214.357 8214.357 0 0 0-36.728 65.392c-7.763 14.333-14.63 25.829-20.603 34.488-5.972 8.66-11.346 15.378-16.124 20.155-8.36 7.764-21.797 11.645-40.31 11.645-17.916 0-26.874-3.583-26.874-10.749 0-2.986 2.09-6.868 6.27-11.645 26.874-35.832 53.3-75.246 79.278-118.244 25.978-42.998 50.014-85.996 72.11-128.994-18.512-63.302-37.473-112.122-56.882-146.46-19.409-34.34-38.668-51.508-57.778-51.508a24.62 24.62 0 0 0-10.302 2.239c-3.284 1.493-6.867 4.628-10.75 9.406-3.88 4.777-8.36 11.346-13.436 19.707-5.076 8.36-11.197 19.11-18.364 32.248L310 475.661c7.764-26.277 14.482-47.029 20.155-62.257 5.674-15.229 11.198-26.575 16.572-34.04 5.375-7.465 11.198-12.392 17.468-14.78 6.27-2.39 14.482-3.584 24.634-3.584 13.139 0 25.082 5.375 35.832 16.124 5.375 6.57 11.496 15.826 18.363 27.77 6.868 11.943 13.885 26.276 21.051 42.997 7.167 17.319 14.482 36.877 21.947 58.674 7.465 21.798 15.08 46.432 22.843 73.903 21.499-38.818 39.564-71.066 54.195-96.745 14.631-25.68 25.828-45.387 33.592-59.122 8.36-13.736 15.228-24.933 20.603-33.592 5.375-8.66 9.555-13.885 12.541-15.676 7.166-5.972 19.409-8.958 36.727-8.958 19.11 0 28.665 3.583 28.665 10.75 0 3.582-1.492 7.464-4.478 11.644zM284 254.875h456c19.33 0 35-15.67 35-35s-15.67-35-35-35H284c-19.33 0-35 15.67-35 35s15.67 35 35 35z" fill="#43D39E" p-id="3535" /></svg>
                  </div>
                </div>
              </li>
              <li class="p-20 borderb-1">
                <div class="ov-title-flex">
                  <div>
                    <h5 class="h5-fs-c-1">范围之差</h5>
                    <h5 class="ov-title-flex-font-s mt-13">{{ range }}</h5>
                  </div>
                  <div>
                    <svg t="1606719707211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5051" width="70" height="70"><path d="M198.5 576c29.8 0 54.9-20.4 62-48h119V320c0-15.7 13-28.4 28.8-28 15.3 0.4 27.2 13.4 27.2 28.6V704c0 33.1 26.9 60 60 60s60-26.9 60-60V439.3c-0.3-6.8 2.3-13.4 7.2-18.5 5.4-5.6 13-8.9 20.8-8.9 15.4 0 28 12.6 28 28v88h151c7.1 27.6 32.2 48 62 48 35.3 0 64-28.7 64-64s-28.7-64-64-64c-29.8 0-54.9 20.4-62 48h-119v-56c0-33.1-26.9-60-60-60-16.5 0-32.5 6.8-43.9 18.7-10.9 11.4-16.6 26.1-16.1 41.6V704c0 15.4-12.6 28-28 28s-28-12.6-28-28V320c0-33.4-27.4-60.5-60.9-60-32.9 0.5-59.1 28-59.1 60.9v175h-87c-7.1-27.6-32.2-48-62-48-35.3 0-64 28.7-64 64 0 35.4 28.7 64.1 64 64.1z m626-96c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m-626 0c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z" p-id="5052" fill="#8278F1" /><path d="M951.5 159h-879c-4.4 0-8 3.6-8 8v690c0 4.4 3.6 8 8 8h879c4.4 0 8-3.6 8-8V167c0-4.4-3.6-8-8-8z m-40 658h-799V207h799v610z" p-id="5053" fill="#8278F1" /></svg>
                  </div>
                </div>
              </li>
              <li class="p-20 borderb-1">
                <div class="ov-title-flex">
                  <div>
                    <h5 class="h5-fs-c-1">店铺会员总销售量</h5>
                    <h5 class="ov-title-flex-font-s mt-13">{{ allSale }}</h5>
                  </div>
                  <div>
                    <svg t="1606719946992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5435" width="70" height="70"><path d="M873.48 933.77c-16.22 0-29.36-14.33-29.36-32v-754c0-11.05-8.22-20-18.35-20H230.75c-16.22 0-29.36-14.33-29.36-32s13.15-32 29.36-32h598.69c40.54 0 73.4 35.82 73.4 80v758c0.01 17.67-13.14 32-29.36 32z" p-id="5436" fill="#FF9F43" /><path d="M713.71 224.22c8.82 0 16 7.18 16 16v640c0 8.82-7.18 16-16 16h-534c-8.82 0-16-7.18-16-16v-640c0-8.82 7.18-16 16-16h534m0-64h-534c-44.18 0-80 35.82-80 80v640c0 44.18 35.82 80 80 80h534c44.18 0 80-35.82 80-80v-640c0-44.18-35.82-80-80-80z" p-id="5437" fill="#FF9F43" /><path d="M648.9 397.33H242.01c-17.67 0-32 14.33-32 32s14.33 32 32 32H648.9c17.67 0 32-14.33 32-32s-14.32-32-32-32zM564.02 549.69H242.01c-17.67 0-32 14.33-32 32s14.33 32 32 32h322.01c17.67 0 32-14.33 32-32s-14.32-32-32-32z" p-id="5438" fill="#FF9F43" /></svg>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="bg-purple bc-w-r p-12">
          <h5 class="h5-s-1 mt-0 p-3">三段比例</h5>
          <div class="card-body">
            <ve-funnel :data="funnelList" />
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple bc-w-r">
          <div class="p-12">
            <el-button type="primary" class="ov-float-right bt-select" @click="exportExcel('cigarette')">
              <i class="el-icon-tickets" />
              Export</el-button>
            <h5 class="mb-0 h5-s-1 pl-12">卷烟类型排行</h5>
            <div class="p-20">
              <el-table
                :data="cigaretteList"
                height="355"
                style="width: 100%"
              >
                <el-table-column
                  prop="nameShop"
                  label="名称"
                />
                <el-table-column
                  prop="numberShop"
                  label="数量"
                />
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    this.lineExtend = {
      series: {
        symbol: 'none',
        lineStyle: {
          color: '#43D39E'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'rgba(217, 246, 236, 1)' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(217, 246, 236, 0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      dataZoom: [{
        start: 0,
        end: 100,
        type: 'inside',
        show: true
      },
      {
        type: 'inside',
        show: true
      }],
      xAxis: [{
        axisLine: {
          show: false
        },
        data: {
          textStyle: {
            color: 'red'
          }
        }
      }],
      yAxis: [{
        axisLine: {
          show: false
        }
      }]
    }
    return {
      cigaretteList: [],
      vipList: [],
      timeLine: {
        columns: ['nameShop', 'numberShop'],
        rows: []
      },
      funnelList: {
        columns: ['nameShop', 'numberShop'],
        rows: []
      },
      fristAllPro: 0,
      averageTitle: 0,
      range: 0,
      allSale: 0,
      shopname: '',
      shopName: [],
      timeBefore: '',
      timeAfter: '',
      drawer: false,
      name: ''
    }
  },
  created() {
    this.selectshopName()
  },
  methods: {
    defult_loading() {
    },
    time_String(date) {
      var year = date.getFullYear()
      var month = (date.getMonth() + 1).toString()
      var day = (date.getDate()).toString()
      if (month.length === 1) {
        month = '0' + month
      }
      if (day.length === 1) {
        day = '0' + day
      }
      var hours = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      // eslint-disable-next-line no-unused-vars
      return year + month + day + hours + m + s
    },
    selectshopName: function() {
      this.$axios.post(`first/shop/name`)
        .then(res => {
          // eslint-disable-next-line no-unused-vars
          var ListShop = []
          for (var i = 0; i < res.data.length; i++) {
            ListShop.push({ 'value': res.data[i], 'label': res.data[i] })
          }
          this.shopName = ListShop
        })
    },
    select: function() {
      this.defult_loading()
      var data = new URLSearchParams()
      data.append('befor', this.time_String(this.timeBefore))
      data.append('lafter', this.time_String(this.timeAfter))
      data.append('shop_name', this.shopname)
      this.$axios.post(`/cumer/shop_only`, data)
        .then(res => {
          var All = 0
          this.vipList = res.data
          this.name = this.vipList[0].phone
          var i
          for (i = 0; i < res.data.length; i++) {
            All += parseFloat(res.data[i].numberShop)
          }
          this.fristAllPro = (parseFloat(res.data[0].numberShop) / All).toFixed(2) * 100
          this.averageTitle = (All / res.data.length).toFixed(2)
          this.allSale = All
          this.range = parseFloat(res.data[0].numberShop) - parseFloat(res.data[res.data.length - 1].numberShop)
          this.select_shop_pie()
          this.select_shop_time(1)
          this.drawer = false
        })
    },
    select_shop_pie: function() {
      this.funnelList.rows = []
      var data = new URLSearchParams()
      data.append('befor', this.time_String(this.timeBefore))
      data.append('lafter', this.time_String(this.timeAfter))
      data.append('phone', this.name)
      data.append('shop_name', this.shopname)
      this.$axios.post(`/cumer/pie`, data)
        .then(res => {
          this.cigaretteList = res.data
          var i
          var num = 0
          for (i = 0; i < res.data.length; i++) {
            if (i == (res.data.length / 3).toFixed(0) || i == (res.data.length / 3 * 2).toFixed(0) || i == res.data.length-1) {
              this.funnelList.rows.push({ 'nameShop': '第' + (i / (res.data.length / 3)).toFixed(0) + '阶梯', 'numberShop': num })
              num = 0
            } else {
              num += parseFloat(res.data[i].numberShop)
            }
          }
        })
    },
    select_shop_time: function(i) {
      var data = new URLSearchParams()
      data.append('befor', this.time_String(this.timeBefore))
      data.append('lafter', this.time_String(this.timeAfter))
      data.append('phone', this.name)
      data.append('VeLineId', i)
      data.append('shop_name', this.shopname)
      this.$axios.post(`/cumer/time`, data)
        .then(res => {
          this.timeLine.rows = res.data
        })
    },
    exportExcel(i) {
      require.ensure([], () => {
        console.log('dada')
        // eslint-disable-next-line camelcase
        const { export_json_to_excel } = require('@/vendor/Export2Excel.js')// 注意这个Export2Excel路径
        if (i === 'vip') {
          const tHeader_1 = ['名称', '手机号', '购买数量'] // 上面设置Excel的表格第一行的标题
          // eslint-disable-next-line camelcase
          const filterVal_1 = ['nameShop', 'phone', 'numberShop'] // 上面的index、nickName、name是tableData里对象的属性key值
          var list = this.vipList // 把要导出的数据tableData存到list
          var data = this.formatJson(filterVal_1, list)
          export_json_to_excel(tHeader_1, data, '店铺会员购买数量')// 最后一个是表名字I
        } else {
          list = this.cigaretteList // 把要导出的数据tableData存到list
          // eslint-disable-next-line camelcase
          const tHeader_2 = ['名称', '数量'] // 上面设置Excel的表格第一行的标题
          // eslint-disable-next-line camelcase
          const filterVal_2 = ['nameShop', 'numberShop'] // 上面的index、nickName、name是tableData里对象的属性key值
          data = this.formatJson(filterVal_2, list)
          export_json_to_excel(tHeader_2, data, '会员购买维度分析')// 最后一个是表名字
        }
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleCurrentChange(val) {
      this.name = val.phone
      this.select_shop_pie()
      this.select_shop_time(1)
    }
  }
}
</script>

<style scoped>
.only-vip{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size:  1rem;
  font-weight: 400;
  color: #2e3136;
  background-color: rgb(240, 242, 245);
}
.only-vip h1,h2,h3,h4,h5,h6,h7{
  margin: 10px 0px 0px;
  font-weight: 600;
  font-family: "Nunito Sans",sans-serif;
  display: block;
}
.ov-float-right{
  float: right;
}
.only-vip ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.bt-select{
  margin: 9px;
  padding: 6px 10px;
  background-color: #5369f8;
  font-size: .76562rem;
}
.h5-s-1{
   font-size: 1.04rem;
 }
.h5-fs-c-1{
  font-size: 10px;
  color: #6c757d;
}
  .p-20{
    padding: 20px;
  }
  .pl-12{
    padding-left: 12px;
  }
  .p-12{
    padding: 12px;
  }
  .mt-13{
    margin-top: 13px;
  }
  .pt-0{
    padding-top: 0px;
  }
  .bc-w-r{
    background-color: white;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -webkit-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    -moz-box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
    box-shadow: 10px 10px 6px -7px rgba(0,0,0,0.05);
  }
.nav-ul{
  display: flex;
  flex-wrap: wrap;
}
.nav-ul li{
  color: #6c757d;
  padding: .5rem 1rem;
}
  .ov-title-flex{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

  }
  .ov-title-flex-font-s {
    font-size: 1.6rem
  }
  .borderb-1{
    border-bottom: 1px solid #f6f6f7;
  }
.el-table{
  font-size: 12px !important;
}
</style>
